<template>
  <div>
    <!--数据区 -->
    <el-tree :data="menus" :props="defaultProps" node-key="catId" show-checkbox :default-expanded-keys="expandsKey"
      :expand-on-click-node="false" draggable :allow-drop="allowDrop">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 2" type="text" size="mini" @click="() => append(data)">
            增加
          </el-button>
          <el-button v-if="node.childNodes.length == 0" type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
          <el-button type="text" size="mini" @click="update(data)">
            修改
          </el-button>
        </span>
      </span>
    </el-tree>
 
    <!-- 新增/修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="category">
        <el-form-item label="父级id" :label-width="formLabelWidth">
          <el-input v-model="category.parentCid" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="子分类" :label-width="formLabelWidth">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" :label-width="formLabelWidth">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="show">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",//对话框标题 add添加分类 update修改分类
      dialogType: "",
      menus: [],//页面显示数据
      expandsKey: [],  //默认要展开的菜单 存放父id展开其子分类
      defaultProps: {
        children: "children",
        label: "name"
      },
      //dialogTableVisible: false,
      dialogFormVisible: false,
      category: {//新增的数据
        parentCid: 0,//父id
        catId: null, //表示不带id添加category  null不传数据 "" 传空字符串
        name: '',//分类名称
        showStatus: 1,
        sort: 0,
        catLevel: 0,
        icon: "",
        productUnit: ""
      },
      formLabelWidth: '120px' //对话框宽度

    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 获取数据列表
    getTreeList() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("data-------", data.data)
        this.menus = data.data
      });
    },
    show() {
      if (this.dialogType == "add") {
        this.addCategory()
      }
      if (this.dialogType == "update") {
        this.updateCategory()
      }
    },
    // 修改数据   此时要重新查一下数据防止别的用户在这上面更改的没有显示出正确的数据
    update(data) {
      this.dialogFormVisible = true //显示对话框
      this.title = "修改分类"
      this.dialogType = "update"
      console.log("data????????????", data);
      this.category.parentCid = data.parentCid
      this.category.name = data.name
      this.category.catId = data.catId
      this.category.icon = data.icon
      this.category.productUnit = data.productUnit
      //查询数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${this.category.catId}`),
        method: "get",
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        console.log("重新获取数据data", data.data)
        this.category = data.data
        console.log("this.category>>>>", this.category);

      });


    },
    // 修改方法
    updateCategory() {
      console.log("this.updateC.....", this.category);
      var { catId, icon, productUnit, name } = this.category
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: 'post',
        data: this.$http.adornData({ catId, icon, productUnit, name }, false)
      }).then(({ data }) => {
        console.log("修改后查询的数据",data);
        if (data && data.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1500  //消息“添加成功”会在屏幕上显示1500毫秒
          })
        }
        this.getTreeList();
        this.dialogFormVisible = false
        this.expandsKey = [this.category.parentCid]
      })
    },
    // 追加数据
    append(data) {
      console.log(data)
      this.dialogFormVisible = true
      this.title = "添加分类"
      this.dialogType = "add"
      this.category.parentCid = data.catId
      this.category.catLevel = data.catLevel * 1 + 1 //层级加1 *1是为了防止值是字符串
      this.category.name = ""
      this.category.catId = null
      this.category.icon = ""
      this.category.productUnit = ""


    },
    // 添加方法
    addCategory() {

      //  //判断名称是否重复
      //  data.children.forEach(function (item, index, array) {
      //   if (this.category.name == item.name) {
      //     this.$message({
      //       message: '分类已存在',
      //       type: 'fail',
      //       duration: 1500  //消息“添加成功”会在屏幕上显示1500毫秒
      //     })
      console.log("添加子级分类", this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: 'put',
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        console.log(data);
        if (data && data.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500  //消息“添加成功”会在屏幕上显示1500毫秒
          })
        }
        this.getTreeList();
      })
      this.dialogFormVisible = false
      this.expandsKey = [this.category.parentCid]
    },
    remove(node, data) {
      var ids = [data.catId]
      var name = data.name
      this.$confirm(`确定对${name}进行[删除]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/product/category/delete"),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 200) {
            console.log("remove", node, data);

            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            //刷新出新的菜单
            this.getTreeList()
            //设置需要默认展开的菜单
            this.expandsKey = [node.parent.data.catId]
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }

  },
  activated() {
    //页面被激活就会发送的请求
    this.getTreeList();
  },

}
</script>

<style scoped></style>